<template>
  <div>
    <div v-for="(item, index) in fieldNames" :key="index">
      <a-form-model-item
        :prop="Array.isArray(item.key) ? item.key[0] : item.key"
        :label="item.name"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 20 }"
      >
        <slot :index="index" />
        <a-input
          style="width: 300px"
          v-if="item.type == '_input'"
          v-model="data[item.key]"
        ></a-input>
        <a-radio-group
          :defaultValue="data[item.key]"
          v-if="item.type == '_radio'"
          @change="(value) => radioChange(value, item.key)"
        >
          <a-radio
            style="display: inline-block"
            v-for="(item1, index1) in item.options"
            :key="index1"
            :value="item1.value"
          >
            {{ item1.label }}
          </a-radio>
        </a-radio-group>
        <a-textarea
          style="width: 300px"
          v-if="item.type == '_textarea'"
          v-model="data[item.key]"
        ></a-textarea>
        <a-select
          :options="item.options"
          :style="item.size == 'long' ? 'width: 350px' : 'width: 150px'"
          v-if="item.type == '_selector'"
          :mode="item.mode == 'multiple' ? 'multiple' : 'default'"
          v-model="data[item.key]"
        ></a-select>
        <div v-if="item.type == '_image'" class="">
          <upload-img
            :imgUrl="data[item.key]"
            @uploadCoverImg="(url) => uploadCoverImg(url, item.key)"
          ></upload-img>
          <div v-if="item.tips" style="margin-top: 5px; color: red">
            {{ item.tips }}
          </div>
        </div>
        <a-cascader
          style="width: 300px"
          v-if="item.type == '_cascader'"
          :loadData="loadCityData"
          :changeOnSelect="true"
          :allowClear="false"
          :options="item.options"
          @change="cascaderChoose($event, item.key)"
        ></a-cascader>
      </a-form-model-item>
    </div>
  </div>
</template>
<script>
import UploadImg from "./uploadImg";
export default {
  props: {
    data: Object,
    // 表单字段名
    fieldNames: Array,
  },
  components: { UploadImg },
  data() {
    return {};
  },

  methods: {
    // 选择封面图
    uploadCoverImg(url, key) {
      console.log(url);
      this.data[key] = url.url;
      this.$forceUpdate();
    },
    // 勾选单选框
    radioChange(value, key) {
      this.data[key] = value.target.value;
    },
  },
  created() {},
};
</script>
